<template>
  <div class="user">
      <div class="right-con">
        <div>
          <div class="mb30">
            <el-row>
              <el-col :span="8">
                <el-input
                  v-model="entryTxt"
                  placeholder="请输入设备编号查询"
                  :change="txtnull()">
                </el-input>
              </el-col>
              <el-col :span="6">
                  <el-button class="ml15"
                    @click="searchList()"
                    type="info">
                    查询
                  </el-button>
                  <el-button class="ml10"
                    @click="synchronous()"
                    type="info">
                    设备同步
                  </el-button>
              </el-col>
            </el-row>
          </div>
          <div>
            <el-table
              :data="tableList"
              style="width: 100%">
              <el-table-column
                prop="device_sn"
                align="center"
                label="设备编号">
              </el-table-column>
              <el-table-column
                prop="name"
                align="center"
                label="设备名称">
              </el-table-column>
              <el-table-column
                align="center"
                label="游戏金币">
                <template scope="props">
                  <span>{{props.row.coin}}金币/次</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="device_status"
                align="center"
                label="设备状态">
                <template scope="props">
                  <span v-if="props.row.device_status == 0">空闲中</span>
                  <span v-if="props.row.device_status == 1">游戏中</span>
                  <span v-if="props.row.device_status == 2">维护中</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="is_display"
                align="center"
                label="操作">
                <template scope="props">
                  <el-switch
                    v-model="props.row.is_display"
                    on-text="显示"
                    off-text="隐藏"
                    @change="setdolls('show',props.row)">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="置顶">
                <template scope="props">
                  <span @click="setdolls('top',props.row)" style="cursor: pointer;">
                     <img width="20" src="../../assets/images/top.png" alt="">
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="详情设置">
                <template scope="props">
                    <el-button class="fs14" type="text" size="small" @click="goeditDolls(props.row)">
                      编辑
                    </el-button>
                </template>
              </el-table-column>
            </el-table>
            <page-ctrl
              v-if="pageData"
              :page_data="pageData"
              v-on:sentLengthfn="sentLengthfn"
              v-on:firstfn="firstData"
              v-on:nextfn="nextData"
              v-on:prefn="preData"
              v-on:lastfn="lastData">
            </page-ctrl>
          </div>
        </div>
      </div><!--.right-con-->
    <div v-if="loading" class="loadingbox"></div>
  </div><!--.user-->
</template>

<script type="text/ecmascript-6">
  import api from '../../assets/js/api';
  import pageCtrl from '../common/pageCtrl'


  export default {
    name: "user",
    data() {
      return {
        pageData:null,
        searchTxt: '',
        entryTxt: '',
        loading: true,
        page: 1,
        per_page: 5,
        tableData: null,
        tableList: null,
        is_moreData: false, //是否有更多
        is_preData: false,//是否有上一页
        tableDataLength: null, //总长度
        pages: null, //总页数
        is_change: false,
        loading: false,
        is_change_length:true
      }
    },
    mounted: function () {
      this.getlist();
    },
    components: {
      pageCtrl
    },
    methods: {
      getlist: function () {
        this.loading = true;
        if(window.sessionStorage.getItem('is_old')){
          this.page=window.sessionStorage.getItem('page');
          this.per_page=window.sessionStorage.getItem('per_page');
          this.is_change=window.sessionStorage.getItem('is_change');
          this.searchTxt=window.sessionStorage.getItem('searchTxt');
          this.entryTxt=window.sessionStorage.getItem('searchTxt');
          window.sessionStorage.removeItem('page');
          window.sessionStorage.removeItem('searchTxt');
          window.sessionStorage.removeItem('is_change');
        }
        api.fetch("/api/admin/machines?page="
          + this.page
          + '&per_page='
          + this.per_page
          + '&device_sn='
          + this.searchTxt)
          .then(res => {
            this.pageData=res.meta;
            this.pageData.page=this.page;
            if(window.sessionStorage.getItem('is_old')) {
              this.pageData.per_page = window.sessionStorage.getItem('per_page');
              window.sessionStorage.removeItem('per_page');
              window.sessionStorage.removeItem('is_old');
            }
            this.tableList = res.data;
            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i].is_display == 0) {
                res.data[i].is_display = false;
              } else {
                res.data[i].is_display = true;
              }
              if(res.data[i].stick_time == 0){
                res.data[i].stick_time=false;
              }else{
                res.data[i].stick_time=true;
              }
            }
            this.pageData.tableDataLength = res.meta.pagination.total; //总长度
            this.pageData.pages = Math.ceil(this.pageData.tableDataLength / this.per_page); //总页数
            let getLengthData = res.meta.pagination.count;
            this.tableList = res.data;
            if (this.page <= 1) {
              this.pageData.is_preData = false;
            } else {
              this.pageData.is_preData = true;
            }
            if (getLengthData < this.per_page) {
              this.pageData.is_moreData = false;
            } else {
              this.pageData.is_moreData = true;
            }
            if (this.pages == this.page) {
              this.pageData.is_moreData = false;
              this.loading = false;
            }
            this.loading = false;
          }).catch();
      },//获取列表
      setdolls: function (type, showdata) {
        let action;
        let actionData;
        if (type == 'show') {
          if (showdata.is_display == false) {
            action = 0;
          } else {
            action = 1;
          }
          actionData = {
            is_display: action
          }
        } else {
          if (showdata.stick_time == false) {
            action = 1;
          } else {
            action = 1;
          }
          actionData = {
            is_top: action
          }
        }
        api.fetch('/api/admin/machines/' + showdata.id , {
          method: 'post',
          data: actionData
        })
          .then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            if(type == 'top'){
              this.page=1;
              this.getlist();
            }
          }).catch();
      }, //显示隐藏操作
      // }, //搜索
      firstData:function(){
        this.page=1;
        this.getlist();
      },//第一页
      nextData: function () {
        this.page++;
        this.getlist();
      },//下一页
      preData: function () {
        this.page--;
        this.getlist();
      },//上一页
      lastData: function () {
        let pagelength = this.pageData.pages;
        this.page = pagelength;
        this.getlist();
      },//尾页
      sentLengthfn: function (lengthData) {
        this.page = 1;
        this.per_page = lengthData;
        this.getlist();
      }, //设置长度
      searchList: function () {
        if (this.entryTxt == '') {
          return
        } else {
          this.page=1;
          this.searchTxt = this.entryTxt;
          this.getlist();
          this.is_change = true;
        }
      }, //搜索
      txtnull: function () {
        if (this.is_change == true ||this.is_change == 'true') {
          if (this.entryTxt == '') {
            this.searchTxt = '';
            this.page = 1;
            this.getlist();
            this.is_change = false;
          }
        }
      },
      goeditDolls:function(obj){
        window.sessionStorage.setItem("is_old",true);
        window.sessionStorage.setItem("page",this.page);
        window.sessionStorage.setItem("per_page",this.per_page);
        window.sessionStorage.setItem("searchTxt",this.searchTxt);
        window.sessionStorage.setItem("is_change",this.is_change);
        this.$router.push('/dollsBox/editDolls?id='
          +obj.id
          +'&device_sn='
          +obj.device_sn
          +'&is_show='
          +obj.is_display
          +'&is_top='
          +obj.stick_time)
      },
      synchronous:function(){
        api.fetch('/api/admin/machines/sync',
          {
            method: 'post'
          })
          .then(res => {
            this.$message({
              message: '同步成功！',
              type: 'success'
            });
          }).catch()
      }
    }
  }
</script>

<style scoped>
  .user {
    height: 100%;
    min-width: 1200px;
  }
</style>
